<template>
    <div class="box1">
        <div class="topb">
            <el-input placeholder="请输入评论人" v-model="userName" :value="userName" @keyup.enter.native="search" class="inpsad"></el-input>
            <el-input placeholder="请输入商品信息" v-model="wareName" :value="wareName" @keyup.enter.native="search" class="inpsad"></el-input>
            <el-input placeholder="请输入评论时间" v-model="createTime" :value="createTime" @keyup.enter.native="search" class="inpsad"></el-input>             
			      <el-input placeholder="请输入订单号" v-model="ordersId" :value="ordersId" @keyup.enter.native="search" class="inpsad"></el-input>
			      <el-button type="primary" @click="search" icon="el-icon-search" class="search">搜索</el-button>
        </div>
        <div class="banner">
            <el-table :data="ticketList" style="width: 100%; cursor: pointer;" @row-click="ToDetails">
                <el-table-column prop="userName" label="评论人"></el-table-column>
                <el-table-column prop="wareName" label="商品信息"></el-table-column>
                <el-table-column prop="opinionTime" label="评论时间"></el-table-column>
                <el-table-column prop="ordersId" label="订单号"></el-table-column>
                <el-table-column label="评论内容">
                  <template slot-scope="sc">
                      <p>{{ sc.row.opinionContent }}</p>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="详情">
                  <template slot-scope="sc">
                    <a href="#" @click="ToDetails(sc.row)">更多</a>
                  </template>
                </el-table-column> -->
            </el-table>
        <!--分页-->
            <el-row>
                <el-col>
                  <el-pagination
                    class="page"
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="pageIndex"
                    @current-change="changePage"
                    :page-size="pageSize">
                  </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      baseUrl:require("../assets/baseUrl.js").baseUrl,
      total: 0,  //总数据条数
      pageIndex: 1,  //当前所在页默认是第一页
      pageSize: 5,  //每页显示多少行数据 默认设置为10
      ticketList: [],  //这里是从后端获取的所有数据
      pageTicket: [],//分页后的当前页数据
      userName:'',
      wareName:'',
      createTime:'',
      ordersId:'',
      userName1:'',
      wareName1:'',
      createTime1:'', 
      ordersId1:'',
    }
  },
  methods: {
     //分页
     changePage(page){
      this.pageIndex=page
        // console.log('走搜索')
        this.userName=this.userName1,
        this.wareName=this.wareName1,
        this.createTime=this.createTime1,
        this.ordersId=this.ordersId1,
        this.searchOpon()
        // this.getTicket()
    },
    //获取评论列表：oponion/menquan
    getTicket(){
      this.$http.post(this.baseUrl+'oponion/menquan',{
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
        adminId:Number(sessionStorage.getItem("adminId")) 
      }).then(res=>{
        // console.log(res);
        if(res.data.code==200){
          this.ticketList=res.data.data.opinions
          this.total=Number(res.data.data.total)
        }
      })
    },
    //搜索：oponion/mencha
    search(){
      this.pageIndex=1
      this.userName1=this.userName
      this.wareName1=this.wareName
      this.createTime1=this.createTime
      this.ordersId1=this.ordersId
      this.searchOpon()
    },
    searchOpon(){
      this.$http.post(this.baseUrl+'oponion/mencha',{
        userName:this.userName1,
        wareName:this.wareName1,
        createTime:this.createTime1,
        ordersId:this.ordersId1,
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
        adminId:Number(sessionStorage.getItem("adminId"))
      }).then(res=>{
        // console.log(res);
        if(res.data.code==200){
          this.ticketList=res.data.data.opinion
          this.total=Number(res.data.data.total)
          // console.log(this.total);
        }
      })
    },
    //跳转详情
    ToDetails(datas){
      // console.log(datas);
      this.$router.push('/business/businessdetails?opinionId='+datas.opinionId)
    }
  },
  mounted(){
    this.getTicket()
  }
}
</script>
<style lang="less">
.box1{
  a{
    text-decoration: none;
    color: #333;
  }
  .topb{
	  width: 80vw;
    height: 65px;
    display: flex;
    float: left;
    line-height: 60px;
    margin-bottom: 15px;
    margin-left: 30px;
	  position: relative;
    
  }
  .search {
			width: 80px;
			height: 40px;
			margin-top: 10px;
			position: relative;
			padding: 0px 26px 0 5px;

			.el-icon-search {
				position: absolute;
				top: 12px;
				right: 7px;
				font-size: 17px;
			}

			.el-button--primary>span {
				position: absolute;
				left: 15px;
				top: 35%;
			}
		}
  .banner{
      width: 80vw;
      margin-left: 30px;
      p{
        width: 100px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        text-decoration: underline;
        margin: 0 auto;
      }
  }
  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }
  .el-input__prefix{
      left: 128px;
    font-size: 24px;
  }
  .inpsad{
      width: 140px;
    margin-right: 10px;
  }
  .el-input__inner{
      //border: 1px solid #000;
      border-radius: 5px;
  }
  .el-button--primary{
    width: 80px;
    height: 40px;
    margin-top: 10px;
    position: relative;
  }
  .el-icon-search{
    position: absolute;
    right: 5px;
    top: 20%;
    font-size: 24px;
  }
  .el-button--primary>span{
    position: absolute;
    left: 15px;
    top: 35%;
  }
  .page{
    text-align: center;
  }
  .cell {
			text-align: center;
			
		}
}

 </style>